{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
{{ username }}
{% endblock %}
{% block content %}
<div class="am-container">
    <div class="am-u-sm-4">
        <div class="am-panel am-panel-default">
            <header class="am-panel-hd">
                <h3 class="am-panel-title">用户信息</h3>
            </header>
            <div class="am-panel-bd">
                <h1 id="username">{{ username }}</h1>
                <hr>
                {% if is_admin %}
                管理员
                {% elif is_forbidden %}
                封禁用户
                {% else %}
                普通用户
                {% endif %}
                &nbsp;&nbsp;&nbsp;
                ID:{{ key }}
                <hr>
                咕咕币:{{ point }}
            </div>
        </div>
    </div>
    <div class="am-u-sm-8">
        <div class="am-panel am-panel-default">
            <header class="am-panel-hd">
                <h3 class="am-panel-title">个人介绍</h3>
            </header>
            <div class="am-panel-bd">
                {{ description|safe }}
            </div>
        </div>
    </div>
</div>
{% if request.session.username == username %}
<div class="am-container">
    <div class="am-u-sm-12">
        <form action="/user/{{ key }}/" method="POST">
            {% csrf_token %}
            <div id="editor"></div>
            <textarea type="text" name="text" id="text" style="display: none;"></textarea>
            <button type="submit" class="am-btn am-btn-primary am-radius" style="margin-top: 10px;">提交</button>
            <a href="{% url 'logout' %}"><button type="button" class="am-btn am-btn-default am-fr am-radius" style="margin-top: 10px;">登出</button></a>
        </form>
        
    </div>
</div>

{% endif %}

<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script>
    var Editor = window.wangEditor
    var editor = new Editor('#editor')
    editor.customConfig.menus = [
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'link',
        'emoticon',
        'code',
        'undo', // 撤销
        'redo',
        'image',
    ]
    editor.customConfig.emotions = [
        {
            // tab 的标题
            title: 'emoji',
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
            content: ['😀', '😃', '😄', '😁', '😆','😂','😅','😎','😋','😊','😉','😐','😣','😥','🥰','😜','🤪','😡']
        }
    ]
    var $text = $('#text')
    setInterval("change();",10);
    function change(){
        $text.val(editor.txt.html());
    }
    editor.create()
    editor.txt.html('{{ description|safe }}')
    // 初始化 textarea 的值
    $text.val(editor.txt.html())
</script>
<style>
    /* eslint-disable */
    #username {
        color: {{ color }};
    }
</style>
{% endblock %}